<template>
    <div class="login-bg" v-bind:style="{height: height + 'px'}">
        <div class="login layui-anim layui-anim-up">
            <div class="message"><strong>faraes-mp</strong>管理登录</div>
            <div id="darkbannerwrap"></div>
            <div class="form-horizontal" role="form" id="login-form">
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" class="form-control" id="username" name="username" placeholder="输入用户名"
                               required data-bv-notempty-message="用户名不为空" pattern="^.{2,10}$"
                               data-bv-regexp-message="用户名在两到十个字符之间" value="" v-model="userName"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="password" class="form-control" id="password" name="password" placeholder="输入密码"
                               required data-bv-notempty-message="密码不为空" pattern="^.{1,20}$"
                               data-bv-regexp-message="密码在一到二十个字符之间" value="" v-model="password"
                               v-on:keyup.enter="login"/>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-block btn-success" @click="login()" id="btn-login">
                登 录
            </button>
        </div>
    </div>
</template>
<script>
import '../../static/plus/x-admin/css/login.css'

export default {
    name: 'Login',
    data () {
        return {
            height: 500,
            userName: '',
            password: ''

        }
    },
    created () {
        this.height = document.body.clientHeight > this.height ? document.body.clientHeight : this.height
    },
    mounted () {
        $('#login-form').bootstrapValidator({
            message: '值不能为空',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            }
        })
    },
    updated () {

    },
    methods: {
        login () {
            // eslint-disable-next-line no-undef
            $('#login-form').data('bootstrapValidator').validate()
            // eslint-disable-next-line no-undef
            var b = $('#login-form').data('bootstrapValidator').isValid()
            if (!b) {
                return false
            }
            let that = this
            // eslint-disable-next-line no-undef
            $('#btn-login').attr('disabled', 'disabled')
            this.$request.post(this.$apiSys.loginUrl, {
                userName: that.userName,
                password: that.password
            }, true).then(res => {
                if (res.status) {
                    // eslint-disable-next-line no-undef
                    layer.msg(res.msg, {icon: 1})
                    // eslint-disable-next-line no-undef
                    $.cookie('userInfo', JSON.stringify(res.data))
                    // eslint-disable-next-line no-undef
                    $.cookie('token', res.token) // , {expires: 1} 不加生效时间，关闭浏览器就失效
                    // this.$ls.setItem('userInfo', JSON.stringify(res.data))
                    // this.$ls.setItem('token', res.token)
                    // this.$router.push('/');
                    setTimeout(() => {
                        top.location.replace('/')
                    }, 1500)
                } else {
                    // eslint-disable-next-line no-undef
                    $('#btn-login').removeAttr('disabled')
                    that.password = ''
                }
                console.log(res)
            })
        }
    }
}
</script>
<style>
</style>
